{% extends 'base.html' %}

{% block admin_dashboard %}
<div id="admin-dashboard" class="hidden flex-1 flex flex-col lg:flex-row">
    <!-- 侧边栏 -->
    <aside class="w-full lg:w-64 bg-white shadow-md lg:h-screen lg:fixed lg:inset-y-0 lg:z-10 transition-all duration-300">
        <div class="p-4 border-b">
            <div class="flex items-center space-x-3">
                <div class="w-10 h-10 rounded-full bg-bank-gradient flex items-center justify-center text-white">
                    <i class="fa fa-user-circle text-xl"></i>
                </div>
                <h2 class="text-xl font-bold text-gray-900">管理员后台</h2>
            </div>
        </div>

        <nav class="py-4">
            <div class="px-4 mb-6">
                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">管理功能</p>
            </div>

            <a href="#admin-dashboard" class="nav-link active">
                <i class="fa fa-dashboard mr-3 w-5 text-center"></i>
                <span>后台首页</span>
            </a>

            <a href="#customer-management" class="nav-link">
                <i class="fa fa-users mr-3 w-5 text-center"></i>
                <span>客户管理</span>
            </a>
        </nav>
    </aside>

    <!-- 主内容区 -->
    <main class="flex-1 lg:ml-64 p-6">
        <!-- 顶部导航 -->
        <header class="mb-6">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">管理员后台</h1>
                    <p class="text-gray-500 mt-1">欢迎管理员</p>
                </div>
                <div class="mt-4 md:mt-0">
                    <button id="admin-logout" class="btn-secondary flex items-center">
                        <i class="fa fa-sign-out mr-2"></i> 退出登录
                    </button>
                </div>
            </div>
        </header>

        <!-- 图表和数据表格 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- 左侧图表 -->
            <div class="lg:col-span-2 bg-white rounded-xl shadow-md p-6 card-shadow">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="text-lg font-semibold text-gray-900">存款类型分布</h3>
                    <div class="flex space-x-2">
                        <button class="px-3 py-1 text-xs font-medium rounded-full bg-primary text-white">本月</button>
                        <button class="px-3 py-1 text-xs font-medium rounded-full bg-gray-100 text-gray-700 hover:bg-gray-200">本季</button>
                        <button class="px-3 py-1 text-xs font-medium rounded-full bg-gray-100 text-gray-700 hover:bg-gray-200">本年</button>
                    </div>
                </div>
                <div class="h-80">
                    <canvas id="depositChart"></canvas>
                </div>
            </div>

            <!-- 右侧客户列表 -->
            <div class="bg-white rounded-xl shadow-md p-6 card-shadow">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="text-lg font-semibold text-gray-900">最近客户</h3>
                    <a href="#customer-management" class="text-primary text-sm font-medium hover:underline">查看全部</a>
                </div>
                <div class="space-y-4 max-h-80 overflow-y-auto pr-2">
                    <!-- 客户列表项 -->
                    <!-- 此处可添加动态生成客户列表的逻辑 -->
                </div>
            </div>
        </div>

        <!-- 客户管理表格 -->
        <div id="customer-management" class="mt-8 bg-white rounded-xl shadow-md p-6 card-shadow hidden">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
                <h3 class="text-lg font-semibold text-gray-900">客户管理</h3>
                <div class="flex space-x-3 mt-4 md:mt-0">
                    <div class="relative flex-1 max-w-md">
                        <input type="text" id="customer-search" class="input-field pl-10" placeholder="搜索客户编号或身份证号">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-search"></i>
                        </span>
                    </div>
                    <button class="btn-primary flex items-center">
                        <i class="fa fa-plus mr-2"></i> 添加客户
                    </button>
                    <button class="btn-secondary flex items-center">
                        <i class="fa fa-file-text-o mr-2"></i> 导出CSV
                    </button>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">客户编号</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">客户姓名</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">身份证号</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">联系电话</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">联系地址</th>
                            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <!-- 客户表格行 -->
                        <!-- 此处可添加动态生成客户表格行的逻辑 -->
                    </tbody>
                </table>
            </div>

            <div class="mt-6 flex items-center justify-between">
                <div class="text-sm text-gray-500">
                    显示 <span class="font-medium">1</span> 到 <span class="font-medium">10</span> 条，共 <span class="font-medium">10</span> 条记录
                </div>
                <div class="flex space-x-2">
                    <button class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-50 disabled:opacity-50" disabled>
                        <i class="fa fa-chevron-left"></i>
                    </button>
                    <button class="px-3 py-1 rounded border border-primary bg-primary text-white">1</button>
                    <button class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-50">2</button>
                    <button class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-50">3</button>
                    <button class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-50">
                        <i class="fa fa-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </main>
</div>
{% endblock %}